Where it came from
A typewriter that prints in color
In 2012 the artist Tyree Callahan rebuilt a vintage typewriter so that each key struck a pad of colored ink instead of a letter, and painted landscapes with it. Lane Snively wanted to make art on one.
I wanted to be able to create art using a real chromatic typewriter but they are difficult to attain. I looked for software that simulated a chromatic typewriter and couldn't find one. I wanted to create it so that I could use it.Final project notebook
So Lane and Quinton Hetland built it as their senior design project and published it on Google Play, free for any artist. The project abstract makes the case for it: AI image generators are fine if all you need is a finished picture, but they skip the part artists get the most from.
Artists can experience a unique benefit from the meditative process of creating different kinds of art, which is bypassed entirely when the creative process is outsourced to machines.URID 2023 abstract
Drawing apps expect a stylus that imitates a pen. Chromatic Typewriter uses the keyboard instead, which makes painting feel casual. The landscape on the example canvas above is a 656-character text brush, a nod to the painting made on the original machine.
The idea
Keys are stamps
The project README explains the app with rubber stamps, in four steps. Each picture below is drawn by the same code that runs the app above.
1Keyboard characters represent stamps that can be dipped in any color ink.
2Rather than using them one at a time by typing, you can remove them to use individually.
3Used together, they make an array of stamps that prints all at once.
4To Chromatic Typewriterify an image, every pixel is swapped for the nearest stamp.
How it works
64 keys, 61 inks
DrawingView.java maps 64 keys to colors. The digits run in ten steps from 1 (white) to 0 (black). Lowercase letters are light tints and uppercase letters are the darker shade of the same hue, so Shift darkens whatever you type. Comma is a soft yellow and period a soft pink.
Three pairs share a color, which leaves 61 distinct inks:
Converting a picture back into text can only produce one key per ink, so those pairs always come back as o, O and G.
Nearest ink
To convert an image, each pixel is compared with all 61 inks, and the closest one by squared distance in RGB wins:
d² = (r₁ − r₂)² + (g₁ − g₂)² + (b₁ − b₂)²
// SecondFragment.java
private int colorDistance(int color1, int color2) {
int rDiff = Color.red(color1) - Color.red(color2);
int gDiff = Color.green(color1) - Color.green(color2);
int bDiff = Color.blue(color1) - Color.blue(color2);
return (rDiff * rDiff) + (gDiff * gDiff) + (bDiff * bDiff);
}
Select image to CHROMATIC TYPEWRITERify uses it to repaint a photo in the app's inks. Convert canvas to text uses it to turn every pixel of the canvas into a character, which makes the drawing itself a brush.
Image brushes
Any text brush longer than 5,000 characters is treated as an image. Each character paints one pixel, and size / density becomes a sampling step: at 3 the brush reads every third character of every third line, so the picture comes out a third of the size.
Rules that shape the drawings
- Spaces print nothing, so a text brush works like a stencil.
- A character that isn't mapped still prints, in the last ink used.
- While typing, the brush wraps at the right edge and returns to the top after the bottom row. Enter drops one row and keeps the column, like a typewriter's line feed.
- When you paste a brush, Enter returns to the column where the brush started, and nothing wraps: whatever runs off the edge is cut off.
- Clear canvas fills the canvas with the current ink. That is how you change the background color.
Build log
From a Python script to Google Play
Dates come from the repository's 277 commits and the team's four status reports.
planning (5) code (T) release (R) presentation (E)
Repository created. A Python prototype pixelates a photo, reduces it to 26 colors and prints one letter per pixel.
First Android project. The plan was several small apps (file input, settings, an image viewer) to be merged later.
Status report 1: a Java program that converts English text to Greek, the first conversion.
Status report 2: one app instead of several. Scaffolding and the app icon, running on two phones and a tablet.
implement a basic keyboard to drawing feature
map keys on keyboard to colors, implement "color writing"
Backspace, shared state between screens through a ViewModel, brush shapes, the size picker, stroke and fill, load image and the GIF maker. The edit history moved from a stack to a list after it crashed the app.
Paste brush. Version 2 goes out on Google Play.
The digits get their grayscale ramp.
Convert canvas to text. That night's log shows the app crashing with a
TransactionTooLargeException(a 947,176-byte parcel) whenever it went to the background.Text brush scaling, which turned brush size into size / density.
Full-screen drawing view, selection indicators for the bristle buttons and reworked key colors. Releases 10 and 11.
Final project notebook, with the recorded talk for UW's Undergraduate Research and Inquiry Day.
Select image to CHROMATIC TYPEWRITERify.
Updated to Android API 35.
Looking back
"If you had to do it all over again"
I probably would have used some Javascript framework such as React.js to build the app with so it would be easier to publish the app in multiple places without needing to replicate the app for multiple app stores.Final project notebook
This page is that version. The drawing code from DrawingView.java and the conversion code from SecondFragment.java are ported to plain JavaScript, so the app runs in any browser, on a phone or a desktop, with nothing to install.
The notebook also lists where the project could go next: typewriterify many images at once, publish on the Apple App Store, and typewriterify video straight from the camera. Its advice to future teams:
If someone else has implemented something successfully, so can you.Final project notebook, lessons learned
This version
What stayed the same, and what changed
Same as the Android app
- The 64-key color table, hex for hex.
- How the brush moves and wraps while typing and pasting.
- The 5,000-character image-brush rule and density sampling.
- Nearest-ink conversion for typewriterify and convert canvas to text.
- Clear canvas filling with the current ink, the 333-step edit history, and the button colors, labels and toast messages.
Changed for the web
- Backspace restores the exact previous step and brush position. On Android it restored one step late and lost its place after Enter.
- Save 50 canvases for GIF builds the animated GIF itself, instead of saving 50 JPEGs for a separate GIF app.
- Images save as PNG, so the flat inks stay exact.
- Circle and character bristles print inside the same cell as squares. On Android they landed up and to the left, so the top row of characters fell off the canvas.
- An outline shows where the next keystroke lands, the text brush follows the pointer, dragging stamps it repeatedly, and Shift-click pastes in the dark shades.
- Typing also works in full screen.
Credits
- Team
- Lane Snively and Quinton Hetland
- Faculty mentors
- Dr. Mike Borowczak and Jim Ward
- Department
- Computer Science, University of Wyoming
- Presentation
- “Chromatic Typewriter: exploring alternative methods of digital 2D art creation,” oral presentation, Undergraduate Research and Inquiry Day 2023
- Watch and read
- App demo · URID talk · Elevator pitch · Slides
- Get the app
- Chromatic Typewriter on Google Play · source on GitHub